<template>
  <div>
    <div>
      <el-input v-model="str" placeholder="根据品牌名查询" style="width: 300px; position: absolute; left: 270px;"></el-input>
      <el-button @click="so" style="position: absolute;left: 600px;">查询</el-button>
      <el-button @click="addBrand" style="position: absolute;left: 670px;">新增</el-button>
      <el-button @click="deleteBrand" style="position: absolute;left: 750px;">删除</el-button>
      <el-button @click="reload" style="position: absolute;left: 830px;">刷新</el-button>
    </div>
    <div class="table1">
      <el-table :data="brandPageInfo" border :row-class-name="tableRowClassName" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <!-- 表格中多选框组件 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="brandName" label="品牌名称" width="140">
        </el-table-column>
        <el-table-column prop="fletter" label="品牌首字母" width="140">
        </el-table-column>
        <el-table-column prop="isShow" label="是否显示" width="200">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="updateBrand(scope.row.brandCode)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="brandPageInfoPage.current" :page-sizes="[1,2,3]" :page-size="brandPageInfoPage.size"
        layout="total, sizes, prev, pager, next, jumper" :total="brandPageInfoPage.total">
      </el-pagination>
    </div>
    <!-- 修改 -->
    <el-dialog title="商品品牌修改" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">

      <el-form :model="updateBrandForm" :rules="rules" ref="updateBrandForm" label-width="100px">
        <el-form-item label="品牌名称" prop="brandName" style="width: 350px;">
          <el-input v-model="updateBrandForm.brandName"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母" prop="fletter" style="width: 350px;">
          <el-input v-model="updateBrandForm.fletter"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isShow">
          <el-radio-group v-model="updateBrandForm.isShow" style="position: absolute; left: 20px; top: 10px;">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-transfer v-model="updateBrandForm.pcatNames" :data="updateBrandForm.allPCatNames" style="text-align: left;">
        </el-transfer>
        <el-form-item>
          <el-button type="primary" @click="submitForm2('updateBrandForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx2">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog title="商品品牌新增" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">

      <el-form :model="saveBrandForm" :rules="rules" ref="saveBrandForm" label-width="100px">
        <el-form-item label="品牌名称" prop="brandName" style="width: 350px;">
          <el-input v-model="saveBrandForm.brandName"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母" prop="fletter" style="width: 350px;">
          <el-input v-model="saveBrandForm.fletter"></el-input>
        </el-form-item>
        <el-form-item label="品牌描述" prop="brandDesc">
            <el-input type="textarea" v-model="saveBrandForm.brandDesc"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isShow">
          <el-radio-group v-model="saveBrandForm.isShow" style="position: absolute; left: 20px; top: 10px;">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-transfer v-model="saveBrandForm.pcatNames" :data="saveBrandForm.allPCatNames" style="text-align: left;">
        </el-transfer>
        <el-form-item>
          <el-button type="primary" @click="submitForm('saveBrandForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "brand",
    data() {
      return {
        str: "",
        ischecked: [],
        brandPageInfoPage: {},
        brandPageInfo: [],
        dialogVisible: false,
        dialogVisible1:false,
        saveBrandForm:{
          brandName: "",
          fletter: "",
          isShow: "",
          brandDesc:"",
          //右
          pcatNames: [],
          //左
          allPCatNames: [],
        },
        updateBrandForm: {
          brandCode:"",
          brandName: "",
          fletter: "",
          isShow: "",
          //右
          pcatNames: [],
          //左
          allPCatNames: [],
        },
        rules: {
          brandName: [{
              required: true,
              message: '请输入品牌名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 16,
              message: '长度在 2 到 16 个字符',
              trigger: 'blur'
            }
          ],
          fletter: [{
            required: true,
            message: '输入品牌首字母',
            trigger: 'blur'
          }],
          brandDesc: [{
            required: true,
            message: '输入品牌描述',
            trigger: 'blur'
          }],
          isShow: [{
            required: true,
            message: '是否显示',
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      //新增
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送新增请求
            this.$http.post("pawnBrand/saveBrand", {
              brandName: this.saveBrandForm.brandName,
              fletter: this.saveBrandForm.fletter,
              isShow: this.saveBrandForm.isShow,
              pcatNames:this.saveBrandForm.pcatNames,
              brandDesc:this.saveBrandForm.brandDesc
            }).then(resp => {
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      getAllDProduct() {
        this.$http.get("pawnAttrGroup/getAllDProduct").then(resp => {
          let l = resp.data.data.pcatNames;
          for (let i in l) {
            this.saveBrandForm.allPCatNames.push({
              key: l[i],
              label: l[i]
            });
          }
        })
      },
      addBrand(){
        this.dialogVisible1 = true;
        //查询出所有大类
        this.getAllDProduct();
      },
      qx() {
        this.dialogVisible1 = false;
        location.reload();
      },
      //修改
      submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送修改请求
            this.$http.post("pawnBrand/updateBrand", {
              brandCode: this.updateBrandForm.brandCode,
              brandName: this.updateBrandForm.brandName,
              fletter: this.updateBrandForm.fletter,
              isShow: this.updateBrandForm.isShow,
              pcatNames: this.updateBrandForm.pcatNames
            }).then(resp => {
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      updateBrand(brandCode) {
        this.updateBrandForm.brandCode = brandCode;
        //发送请求
        this.$http.get("pawnBrand/getBrandByCode", {
          params: {
            brandCode: brandCode
          }
        }).then(resp => {
          this.updateBrandForm.brandName = resp.data.data.brandName;
          this.updateBrandForm.fletter = resp.data.data.fletter;
          this.updateBrandForm.isShow = resp.data.data.isShow;
          let l = resp.data.data.allPCatNames;
          for (let i in l) {
            this.updateBrandForm.allPCatNames.push({
              key: l[i],
              label: l[i]
            });
          }
          let e = resp.data.data.pcatNames;
          for(let s in e){
            this.updateBrandForm.pcatNames.push(e[s]);
          }
        })
        this.dialogVisible = true;
      },
      handleClose(done) {
        location.reload();
      },
      qx2() {
        this.dialogVisible = false;
        location.reload();
      },
      handleSelectionChange(val) {
        this.ischecked = val;
      },
      deleteBrand() {
        this.$http.post("pawnBrand/deleteBrand", {
          ischecked: this.ischecked
        }).then(resp => {
          alert(resp.data.message);
          location.reload();
        })
      },
      getByStr(currentPage, pagesize) {
        this.$http.get("pawnBrand/getBrandByLike", {
          params: {
            str: this.str,
            current: currentPage,
            size: pagesize
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.brandPageInfo = resp.data.data.records;
            this.brandPageInfoPage = resp.data.data;
          } else {
            alert(resp.data.message);
            location.reload();
          }
        })
      },
      so() {
        this.getByStr(1, 1);
      },
      handleSelectionChange(checked) {
        this.ischecked = checked
      },
      reload() {
        location.reload();
      },
      handleCurrentChange(current) {
        if (this.str == "") {
          this.getAllBrand(current, this.brandPageInfoPage.size);
        } else {
          this.getByStr(current, this.brandPageInfoPage.size);
        }
      },
      handleSizeChange(size) {
        if (this.str == "") {
          this.getAllBrand(this.brandPageInfoPage.current, size);
        } else {
          this.getByStr(this.brandPageInfoPage.current, size);
        }
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.isShow === '否') {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      },
      getAllBrand(currentPage, pagesize) {
        this.$http.get("pawnBrand/getAllBrand", {
          params: {
            current: currentPage,
            size: pagesize
          }
        }).then(resp => {
          this.brandPageInfo = resp.data.data.records;
          this.brandPageInfoPage = resp.data.data;
        })
      }
    },
    created() {
      this.getAllBrand(1, 3);
    }
  }
</script>

<style>
  .table1 {
    position: absolute;
    top: 100px;
    left: 150px;
  }

  .block {
    position: absolute;
    top: 350px;
    left: 300px;
  }

  .el-table .warning-row {
    background: yellow;
  }
</style>
